<template>
  <div id="cesiumContainer" ref="cesiumContainer"></div>
</template>

<script setup>
//引入cesium 引入样式 引入生命周期挂载
import * as Cesium from 'cesium';
import './Widgets/widgets.css';
import { onMounted } from 'vue';

//设置cesium token
Cesium.Ion.defaultAccessToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0MGNkNzY3YS1mMDcxLTQ0NjQtOTlhMC00Y2Y0MjA3ZGQ1ZTIiLCJpZCI6MjY0NzQyLCJpYXQiOjE3MzUwOTQ0NzF9.09AnFzH3aVpi7s-0WqcAYuf69lr4UUIbKL4DmKBf1qg';

//设置根目录静态资源 /代表根目录public
window.CESIUM_BASE_URL = '/';

//设置地球模型相机默认视角
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
  //西边的经度
  89.5,
  //南边的纬度
  20.4,
  //东边的经度
  110.4,
  //北边的纬度
  61.2
);

onMounted(() => {
  // 通过设置查看器挂载到id标识上
  var viewer = new Cesium.Viewer('cesiumContainer', {
    //隐藏会有一个iframe信息框的报错提示js无权限运行
    infoBox: false,
  });

  //隐藏底部logo
  viewer.cesiumWidget.creditContainer.style.display = 'none';
});
</script>

<style>
/* 初始化边距 */
* {
  margin: 0;
  padding: 0;
}
/* 初始化模型和屏幕占位 */
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>
